<!-- Vue 组件示例 -->
<template>
    <div>
        <button @click="fetchData()">获取数据</button>
        <div v-for="item in data" :key="item.id">
            {{ item.id }} - {{ item.uid }} - {{ item.name }} - {{ item.recommend }}
            <button @click="deleteData(item.id)">删除</button>
            <button @click="openEditModal(item.id)">编辑</button>
        </div>
        <div>
            <!-- 数据输入表单 -->
            <form @submit.prevent="submitData">
                <input v-model="formData.id" placeholder="输入id" type="number" required>
                <input v-model="formData.uid" placeholder="输入uid" type="number" required>
                <input v-model="formData.name" placeholder="输入名称" required>
                <input v-model="formData.recommend" placeholder="输入推荐理由" required>
                <button type="submit">提交数据</button>
            </form>

            <!-- 显示操作结果 -->
            <div v-if="resultMessage">{{ resultMessage }}</div>
        </div>
        
        <!-- 编辑模态框 -->
        <div v-if="showEditModal" class="modal">
            <div class="modal-content">
                <h3>编辑数据</h3>
                <form @submit.prevent="submitUpdate">
                    <input v-model="editForm.id" type="number" disabled>
                    <input v-model="editForm.name" required>
                    <input v-model="editForm.recommend" required>
                    <button type="submit">保存</button>
                    <button @click="showEditModal = false">取消</button>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useStore } from 'vuex';

//获取数据
const data = ref([])
const state = useStore()
const showEditModal = ref(false)

const fetchData = async () => {
    try {
        const response = await axios.get(`http://localhost:3001/api/data/shop/${state.state.user.uid}`);
        console.log('获取数据成功:', response.data);
        data.value = response.data;
    } catch (error) {
        console.error('获取数据失败:', error);
    }
};
const formData = ref({
    id: null,
    uid: null,
    name: '',
    recommend: ''
});

// 提交数据到后端 API
const resultMessage = ref('');

const submitData = async () => {
    try {
        // 发送 POST 请求到后端 API
        const response = await axios.post(
            'http://localhost:3001/api/data',
            formData.value
        );

        // 清空表单并显示结果
        formData.value = { id: null,uid: null,name: '',recommend: '' };
        resultMessage.value = `数据插入成功，ID: ${response.data.id}`;
        await fetchData(); // 刷新数据列表
    } catch (error) {
        resultMessage.value = `插入失败: ${error.response?.data?.error || error.message}`;
    }
};

// 删除数据的方法
const deleteData = async (id) => {
    if (!confirm('确定要删除这条数据吗？')) return;

    try {
        await axios.delete(`http://localhost:3001/api/data/${id}`);
        // 删除成功后刷新列表
        await fetchData();
        alert('删除成功');
    } catch (error) {
        alert(`删除失败: ${error.response?.data?.error || error.message}`);
    }
};

//获取数据
const editForm = ref({
    id: null,
    uid: null,
    name: '',
    recommend: ''
});

// 打开编辑模态框并加载数据
const openEditModal = async (id) => {
  try {
    const response = await axios.get(`http://localhost:3001/api/data/${id}`);
    editForm.value = response.data;
    showEditModal.value = true;
  } catch (error) {
    alert(`获取数据失败: ${error.response?.data?.error || error.message}`);
  }
};

// 提交更新
const submitUpdate = async () => {
    try {
        await axios.put(
            `http://localhost:3001/api/data/${editForm.value.id}`,
            {
                recommend: editForm.value.recommend,
            }
        );

        // 更新成功后关闭模态框并刷新列表
        showEditModal.value = false;
        await fetchData();
        alert('更新成功');
    } catch (error) {
        alert(`更新失败: ${error.response?.data?.error || error.message}`);
    }
};
</script>